<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="css/styles.css"/>
    <link rel="stylesheet" href="css/icons.css"/>
    <script src="js/jquery-1.10.2.min.js"></script>

    <!--region brand伪类-->
    <style>

        #brandbox::before{
            width: calc(100% + 200px);
            content: "";
            position: absolute;
            background-color: rgba(133, 133, 133, 0.8);
            height: calc(100% + 200px);
            right: 0;
            bottom: -100px;
            z-index: -1;
        }
        #brandtext::before{
            width: calc(100% + 200px);
            content: "";
            position: absolute;
            background-color: #f4f4f4;
            height: calc(100% + 200px);
            right: 0;
            bottom: -100px;
            z-index: -2;
        }

    </style>
    <!--endregion-->

    <!--region 段落-->
    <style>
        .block{
            margin-top: 200px;
        }
    </style>
    <!--endregion-->

    <!--region 导航栏消失-->
    <script>
        $(document).scroll(function () {
            if($(document).scrollTop()===0) {
                $("#header").removeClass("headroom--not-top headroom--unpinned");
                $("#header").addClass("headroom--pinned headroom--top");
            } else {
                $("#header").removeClass("headroom--pinned headroom--top");
                $("#header").addClass("headroom--not-top headroom--unpinned");
            }
            console.log($(document).scrollTop());
        })
    </script>
    <!--endregion-->

    <!--region 动画效果-->
    <link rel="stylesheet" href="css/animate.min.css">
    <style type="text/css">
        .disappear{
            opacity: 0;
        }
        .appear{
            opacity: 1;
            animation-duration: 2s;
        }
        #ppp2{
            animation-delay: 500ms;
        }
        #ppp3{
            animation-delay: 1000ms;
        }
    </style>
    <script>
        $(document).scroll(function () {
            console.log($(document).scrollTop());
            $(".disappear").each(function () {
                if($(document).scrollTop()+600>$(this).offset()['top']) {
                    $(this).removeClass("disappear").addClass("appear").addClass("animated "+$(this).attr("amway"));
                }
            })
        })

    </script>

    <!--endregion-->

</head>
<body>
<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top">
    <div id="header--bg" onscroll="myFunction()">
        <div class="d-flex align-items-center justify-content-end">

            <div id="gnav">
                <nav>
                    <ul>
                        <li><a href="./brand.html"><span>Brand</span></a></li>
                        <li><a href="./portfolio.html"><span>Portfolio</span></a></li>
                        <li><a href="./hometown.html"><span>Hometown</span></a></li>
                        <li><a href="./about.html"><span>About</span></a></li>
                        <li><a href="./contact.html"><span>Contact</span></a></li>
                        <li><img src="./images/logo.svg" width="20%" style="position: relative;top: 5px;left: 20px"/></li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</header>
<main id="index">
    <div id="hero--image" class="active" style="height: 752.7px;">
        <div style="position: relative;left: 1025px;top: 300px">
        <h1 id="ppp1" class="disappear" amway="bounceIn" style="font-size: 3rem;margin-bottom: 2rem">W E L C O M</h1>
        <h1 id="ppp2" class="disappear" amway="bounceIn" style="font-size: 3rem;margin-bottom: 2rem">T O &nbsp; M Y </h1>
        <h1 id="ppp3" class="disappear" amway="bounceIn" style="font-size: 3rem">W E B S I T E .</h1>
        </div>
    </div>
    <section id="index--news" style="margin-bottom: 100px">
        <div class="content-inner-lg-y">
            <div class="container">
                <div class="news-wrap">
                    <div class="news-cat">
                        <h3 id="artist" class="title--primary">Artist</h3>
                    </div>
                    <div class="news-date">
                        <time datetime="2020-05-07T17:50:52+09:00" data-scroll="" class="visible">2020.05.07</time>
                    </div>
                    <div class="news-title">
                        <h4><a href="https://hairmada.com/news/555/">のえる     「一个人的日子」</a></h4>
                    </div>
                    <div class="news-more">
                        <a href="/news/" class="btn btn-arrow-right">View more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="row justify-content-between flex-nowrap">
        <div id="brandbox" class="col-7 row justify-content-center disappear" amway="bounceInLeft" style="z-index: 9">
            <img src="images/home/21.png" width="40%" style="margin-right: 10%">
            <img src="images/home/22.png" width="40%">
        </div>
        <div id="brandtext" class="col-5 row flex-column align-items-start disappear" amway="bounceInRight" style="top: 50px">
            <h2>Brand</h2>
            <p>个人标志设计 设计说明 名片展示</p>
            <p>个人标志设计 设计说明 名片展示</p>
            <div class="btn-wrap scrt-to-top text-center pt50 visible" data-scroll="">
                <a href="./brand.html" class="btn has-arrow-right">View more</a>
            </div>
        </div>
    </div>
</main>
<aside id="aside--gallery" class="block" >
    <div class="content-inner-lg-y">
        <div class="container">
            <h3 id="portfolio" class="title--primary mb80 scrt-to-top text-center disappear" amway="bounceIn" >Portfolio</h3>
            <div class="row gutters-10 disappear" amway="bounceInUp">
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/496/" class="gallery-bg lazyloaded"  style="background-image: url(images/home/31.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">控え目ウルフレイヤー</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Medium</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/488/" class="gallery-bg lazyloaded"  style="background-image: url(images/home/32.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">ショートレイヤー</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Short</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/480/" class="gallery-bg lazyloaded" style="background-image: url(images/home/33.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">メンズショートアップスタイル</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Mens</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/478/" class="gallery-bg lazyloaded" style="background-image: url(images/home/34.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">アシメショートボブ</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Bob</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/476/" class="gallery-bg lazyloaded"  style="background-image: url(images/home/41.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">ハンサムショート</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Short</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/439/" class="gallery-bg lazyloaded"  style="background-image: url(images/home/42.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">毛先カラー</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Long</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/436/" class="gallery-bg lazyloaded"  style="background-image: url(images/home/43.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">子供カット　ショート</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Kids</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-gallery">
                        <div class="gallery-body scrt-fade visible" data-scroll="">
                            <a href="https://hairmada.com/gallery/435/" class="gallery-bg lazyloaded"  style="background-image: url(images/home/44.png);">
                                <div class="gallery-detail">
                                    <div class="detail-inner">
                                        <h4 class="gallery-title">メンズショート　カットカラー　赤紫</h4>
                                        <div class="gallery-cat">
                                            <span class="badge badge-gallery en">Mens</span>														</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-wrap scrt-to-top text-center pt50 visible" data-scroll="">
                <a href="./portfolio.html" class="btn has-arrow-right">View more</a>
            </div>
        </div>
    </div>
</aside>
<aside id="aside--about" class="block">
    <div class="content-inner-lg-y pos-r">
        <div class="container">
            <div class="row no-gutters">
                <div class="col-md-6">
                    <div class="about-body visible" data-scroll="">
                        <h3 id="hometown" class="title--primary mb40 scrt-to-left visible" data-scroll="">Hometown</h3>
                        <div class="deitail mb20">
                            「五岳归来不看山 黄山归来不看岳」<br>「五岳より帰り来たれば、山を見ず、黄山より帰
                            り来たれば、五岳を見ず」
                        </div>
                        <div class="btn-wrap scrt-to-left text-center text-md-left visible" data-scroll="">
                            <a href="./hometown.html" class="btn has-arrow-right">View more</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</aside>
<aside id="aside--recruit">
    <div class="bg">
        <div class="content-inner-lg-y">
            <div class="container">
                <h3 id="about" class="title--primary mb80 scrt-to-top text-center visible" data-scroll="">About</h3>
                <h5 class="mb40 scrt-to-top text-center visible" data-scroll="">「双鱼」「永远十八」</h5>
                <p class="scrt-to-top text-md-center visible" data-scroll="">「私の城の中でサイダーを置くことができなくて、執事は私がサイダーに近づくことを恐れて、サイダーは私にかわいくてゴロゴロ泡が出る。」 <br class="d-none d-md-block">心を込めておもてなしすれば必ずお客様に伝わり、そしてあなたにとって必ず大切なお客様となります。</p>
<!--                <div class="btn-wrap scrt-to-top text-center pt40 visible" data-scroll="">-->
<!--                    <a href="/recruit/" class="btn has-arrow-right">View more</a>-->
<!--                </div>-->
            </div>
        </div>
    </div>
</aside>
<aside id="aside--blog">
    <div class="content-inner-lg-y">
        <div class="container">
<!--            <h3 class="title&#45;&#45;primary mb80 scrt-to-top text-center visible" data-scroll="">Blog</h3>-->
            <div class="row gutters-10">
                <div class="col-lg-3 col-6 mb20">
                    <div class="card card-gallery">
                        <a href="https://hairmada.com/news/555/" class="card--image lazyloaded"  style="background-image: url(images/home/61.png);"></a>
                    </div>
                    <div class="aside-blog-details">
                        <time datetime="2020-05-07T17:50:52+09:00" data-scroll="" class="visible">2017.07.28</time>
                    </div>
                </div>
                <div class="col-lg-3 col-6 mb20">
                    <div class="card card-gallery">
                        <a href="https://hairmada.com/news/550/" class="card--image lazyloaded"  style="background-image: url(images/home/62.png);"></a>
                    </div>
                    <div class="aside-blog-details">
                        <time datetime="2020-05-06T10:56:19+09:00" data-scroll="" class="visible">2018.04.11</time>
                    </div>
                </div>
                <div class="col-lg-3 col-6 mb20">
                    <div class="card card-gallery">
                        <a href="https://hairmada.com/blog/536/" class="card--image lazyloaded"  style="background-image: url(images/home/63.png);"></a>
                    </div>
                    <div class="aside-blog-details">
                        <time datetime="2020-05-05T12:24:47+09:00" data-scroll="" class="visible">2019.11.20</time>
                    </div>
                </div>
                <div class="col-lg-3 col-6 mb20">
                    <div class="card card-gallery">
                        <a href="https://hairmada.com/blog/530/" class="card--image lazyloaded"  style="background-image: url(images/home/64.png);"></a>
                    </div>
                    <div class="aside-blog-details">
                        <time datetime="2020-05-03T10:54:49+09:00" data-scroll="" class="visible">2020.05.07</time>
                    </div>
                </div>
            </div>
            <div class="btn-wrap scrt-to-top text-center pt40 visible" data-scroll="">
                <a href="./about.html" class="btn has-arrow-right">View more</a>
            </div>
        </div>
    </div>
</aside>
<footer id="footer">
    <div class="container pos-r">
        <div class="ft--body">
            <div class="row justify-content-between">
                <div class="col-lg-5 order-lg-2">
                    <div id="foot-contact" class="row flex-column justify-content-around align-items-start" style="position: relative;top: -200px;padding: 50px">
                        <h3 class="mb40 z-index-99">Contact</h3>
                        <p class="mb30 z-index-99">著名奶茶鉴定家。<br>国家精准扶贫项目重点帮扶对象。</p>
                        <p class="z-index-99"><span>TEL:</span>139 6550 1155</p>
                        <p class="z-index-99"><span>EMAIL:</span>806632876@qq.com</p>
                    </div>
                </div>
                <div class="col-lg-7 order-lg-1 row justify-content-around align-items-start">
                    <img class="col-2" src="./images/logo-foot.svg" alt="Invincible Hair MADA">
                    <div class="d-none d-lg-block col-8">
                        <div class="row mb60">
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/concept/">Brand</a></li>
                                    <li><a href="/About/">About</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/recruit/">Portfolio</a></li>
                                    <li><a href="/contact/">Contact</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/news/">Hometown</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>